<template>
  <div class="register-panel">
    <Panel>
      <template v-slot:header-slot>
        用户注册
      </template>
      <template v-slot:body-slot>
        <form id="form-register" action="/register" method="post">
          <div class="formgroup username">
            <label for="username">账号</label>
            <input type="text" name="username" id="username">
          </div>
          <div class="formgroup password">
            <label for="password">密码</label>
            <input type="text" name="password" id="password">
          </div>
          <div class="formgroup password">
            <label for="password">再次输入密码</label>
            <input type="text" name="password" id="password">
          </div>
        </form>
      </template>
      <template v-slot:footer-slot>
        <div class="formgroup button">
          <input class="btn-submit" form="form-register" type="submit" value="注册">
          <router-link to="/login">返回登录</router-link>
        </div>
      </template>
    </Panel>
  </div>
</template>

<script>
import Panel from './common/panel'
export default {
  components: {
    Panel
  }
}
</script>

<style lang="scss">
.register-panel{
  width: 300px;
  height: fit-content;
  margin: 200px auto;
  #form-register{
    width: fit-content;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .formgroup{
      margin: 5px;
    }
  }
  .button{
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .btn-submit{
      width: 60px;
    }
  }
}
</style>
